<?xml version='1.0'?>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">

  <xsl:output 
   method="xml"
    indent="yes"
    doctype-public="-//W3C//DTD XHTML Basic 1.1//EN"
  doctype-system="http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"/>

<xsl:template match="/">
<html>
	<head>
		<title>XML and XSL Lab</title>
		      <script type="text/javascript">
		         function goToURL(URL) {
		            window.location=URL.innerHTML;
		          }
		      </script>
		<link rel="stylesheet" type="text/css" href="./style4.css" />
	</head>	
	<body>
		<table style="background-color: #cccccc; border: 3px solid black;border-collapse:collapse;">
			<tr>
				<td width="auto" style="background-color: black; color: white; border: 1px solid black; font-weight:bold;">State</td>
				<td width="auto" style="background-color: black; color: white;border: 1px solid black; font-weight:bold;">Station ID</td>
				<td width="auto" style="background-color: black; color: white;border: 1px solid black; font-weight:bold;">Station Name</td>
				<td width="auto" style="background-color: black; color: white;border: 1px solid black; font-weight:bold;">Click Here for Weather (XML URL)</td>
			</tr>
						
			<xsl:for-each select="wx_station_index/station">
			<xsl:sort select="station_name"/>
						
			<tr style=" border-bottom: 1px solid black;">
				<td ><xsl:value-of select="state"/></td>
				<td><xsl:value-of select="station_id"/></td>
				<td><xsl:value-of select="station_name"/></td>
				<td>
					<span style="color: #0000FF;">
					<a onclick="goToURL(this);"> <xsl:value-of select="xml_url"/></a>
					</span>
				</td>
			</tr>
			
			</xsl:for-each>
		</table>
	</body>
</html>
</xsl:template>
</xsl:stylesheet>